<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>账号列表</span>
            </div>
        </template>
        <!-- 主要内容 -->
        <div slot="container">
          <el-form
            :model="addForm"
            status-icon
            :rules="rules"
            ref="addFormRef"
            label-width="100px"
            class="demo-ruleForm"
            size="small"
          >
            <!-- 账号 -->
            <el-form-item label="账号" prop="account">
              <el-input
                type="text"
                v-model="addForm.account"
              ></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="addForm.password"
              ></el-input>
            </el-form-item>
            <!-- 用户组 -->
            <el-form-item label="用户组" prop="userGroup">
              <el-select v-model="addForm.userGroup" placeholder="请选择用户组">
                <el-option label="普通管理员" value="普通管理员"></el-option>
                <el-option label="超级管理员" value="超级管理员"></el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" size="small" @click="addAcc"
                >添加</el-button
              >
              <el-button size="small" @click="resetForm"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
    </el-card>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  import { checkAccReg,checkPassReg } from "@/utils/reg.ts";
  import { ElMessage } from "element-plus";
  import { accAdd_api } from "@/api/apis.ts";

//   添加表单的对象
  let addForm = ref({
    account: "",
    password: "",
    userGroup: ""
  })

//   验证账号
let validateAcc = (rule:any,value:any,callback:any)=>{
    console.log(rule);
    if(value == ""){
        callback(new Error("账号不能为空"))
    }else if(!checkAccReg(value)){
        callback(new Error("请输入4-12位账号"))
    }else{
        callback();
    }
}
//   验证密码
  let validatePass = (rule:any,value:any,callback:any)=>{
    console.log(rule);
    if(value == ""){
        callback(new Error("密码不能为空"))
    }else if(!checkPassReg(value)){
        callback(new Error("请输入5-17位密码"))
    }else{
        callback();
    }
  }
  let rules = {
        //自定义校验规则
        account: { validator: validateAcc, trigger: "blur" },
        password: { validator: validatePass, trigger: "blur" },
        userGroup: {
            required: true,
            message: "你没有选分组",
            trigger: "change",
        },
  }

//   获取元素
let addFormRef = ref();
  // 添加按钮
  let addAcc = ()=>{
    addFormRef.value.validate(async (valid:any) => {
          //valid 表示表单所有字段是否通过验证,只要有一个没有通过,返回false,否则返回true
          if (valid) {
            let res = await accAdd_api({
                account: addForm.value.account,
                password: addForm.value.password,
                userGroup: addForm.value.userGroup
            });
            console.log(res);
          }else{
            ElMessage.error("验证不通过")
          }
        });
    }
    // 点击重置按钮
    let resetForm = ()=>{
        addFormRef.value.resetFields();
    }
  
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-input {
    width: 200px;
  }
  </style>